<template>
  <div class="rate-picture">
    <div class="img-box">
      <div class="img-con" v-for="(item, i) in pictureList" :key='i'>
        <img :src="item" class="item">
        <img src="./del.png" class="icon" @click="del(i)" onclick="return false"/>
      </div>

      <div class="picture-box" v-if="pictureList.length < size">
        <img src="./upload.png" class="picture"/>
        <input type="file" class="photo" @change="changeImage($event)"
               accept="image/*"/>
      </div>
    </div>


  </div>
</template>

<script>
  import {getBase64} from "../../common/js/util"

  export default {
    props: {
      size: {
        type: Number,
        default: 6
      }
    },
    data() {
      return {
        picture: "",
        pictureList: [],
      }
    },
    methods: {
      changeImage(e) {
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.picture = 'data:image/png;base64,' + url;//显示图片
            this.pictureList.push(this.picture);
            this.imgChange();
          });
        }
      },
      del(index) {//删除图片
        this.pictureList.splice(index, 1);
        this.imgChange();
      },
      imgChange() {
        this.$emit('uploadImg', this.pictureList);
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .rate-picture
    display: flex
    margin: 0 auto
    width: 93.6%
    margin-bottom: 0.75rem
    .img-box
      display: flex
      align-items: center
      flex-wrap: wrap
      .img-con
        width: 3.027rem
        height: 3.027rem
        position: relative
        padding-bottom: 0.15rem
        margin-right: 0.12rem
        &:nth-child(3n)
          margin-right: 0
        .item
          width: 100%
          height: 100%
          border-radius: 0.16rem
        .icon
          position: absolute
          top: -0.15rem
          right: -0.15rem
          z-index: 99
          width: 0.533rem
          height: 0.533rem
      .picture-box
        position: relative
        .photo
          position: absolute
          top: 0
          opacity: 0
          -ms-filter: 'alpha(opacity=0)'
          z-index: 999
          width: 3.027rem
          height: 3.027rem
        .picture
          width: 3.027rem
          height: 3.027rem
          border-radius: 0.16rem
</style>
